import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';


export default class App extends Component<{}> {

    constructor(){
        super();
        this.state={
          title:'',
          content:''
        }
    }

    // 点击按钮之后触发的方法
  foo(){
    console.log('触发了onPress');
    // 发请求，接收数据
      fetch('http://47.100.185.180/api/list.php')
          .then((x)=>{
              // console.log(JSON.parse(x._bodyText)[0].content);
              // 修改state值
              this.setState({
                  title:JSON.parse(x._bodyText)[0].title,
                  content:JSON.parse(x._bodyText)[0].content
              })
          })


  }

  render() {
    return (
      <View style={styles.container}>
          {/*bind用来将前面函数的this指向修改为传入的对象*/}
        <Text style={styles.btn} onPress={this.foo.bind(this)}>
          点我获得资讯
        </Text>
          <Text>标题：{this.state.title}</Text>
          <Text>内容：{this.state.content}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  btn:{
    backgroundColor:'green',
      width:'60%',
      height:100,
      color:'white',
      textAlign:'center',
      lineHeight:100,
      fontSize:30
  }
});
